import React, { useState, useEffect } from 'react'
import Bottom from './Bottom'
import './App.css'
import {
  Form,
  Input,
  TextArea,
  Dialog,
  Picker,
  Space,
  Button
} from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
import E from 'wangeditor'
import './header.css'




const Publish = () => {
  // useEffect(()=>{
  //   const editor=new E('#div1');
  //   editor.create();
  // },[]);


  const [form] = Form.useForm()
  const onSubmit = () => {

    //未完成：先校验是否都不空在显示提交成功
    Dialog.alert({
      content: '提交成功'
    })
    // const values = form.getFieldsValue()
    // Dialog.alert({
    //   content: JSON.stringify(values),
    // })
  }




  return (
    <div>
      <h3>发布主题</h3>
      <Form
        form={form}
        footer={
          <Button block color='primary' onClick={onSubmit} size='large'>
            提交
          </Button>
        }>
        <Form.Item name='板块'>
          <MobileField />
        </Form.Item>
        <Form.Item
          name='标题'
          rules={[{ message: '标题字数10字以上', min: 10 }]}
        >
          <Input style={{ border: "1px solid #ccc", boxShadow: "-0.5px -0.5px" }} placeholder='标题字数10字以上' type="text" />
        </Form.Item>
        <Form.Item
          name='文本域'
          rules={[{ required: true, message: '请输入内容' }]}
        >
          <TextArea style={{ border: "1px solid #ccc" }} placeholder='请输入内容' rows={10} />
        </Form.Item>
        {/*
          Picker弹出时被遮挡，改zIndex无效？
         <div id="div1" style={{zIndex:-1}} ></div>
          */}
      </Form>
      <div className="bottom"><Bottom /></div>
    </div>
  )
}



const columns = [['学习', '健康', '生活', '娱乐']]
const MobileField = ({
  value = { preValue: '请选择', realValue: '' },
  onChange,
}) => {
  const [visible, setVisible] = useState(false)

  const triggerValue = (changedValue) => {
    onChange?.({ ...value, ...changedValue })
  }
  // 不是很想看懂···
  const onPreValueChange = (value) => {
    const v = value[0]
    if (v === null) return
    triggerValue({ preValue: v })
  }
  return (
    <div>
      选择板块：<Space align='center' style={{ display: 'inline-block', border: "1px solid #ccc" }}>
        <Space
          align='center' onClick={() => setVisible(true)}>
          <div style={{ width: '70px' }}>{value.preValue}</div>
          <DownOutline />
        </Space>
      </Space>
      <Picker
        columns={columns}
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        value={[value.preValue]}
        onConfirm={onPreValueChange}
      />
    </div>
  )
}


export default Publish